<template>
	<view>
		<view class="BlindBox">
		  <view class="nav">
		    <view class="nav_box mb15 mt10" v-for="(item, index) in categorylist" :key="index">
		      <img
		        :src="item.image"
		        @click="jumpPage(item)"
		        class="img"
		      />
		      <view class="text mt5">{{ item.name }}</view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categorylist:[]
			}
		},
		onLoad() {
			this.$http('v1.categorylist', {
				page:1,
				rows: 90,
			}).then((res) => {
				if (res.code == 1) {
					if(res.data.list.length){
						this.categorylist = [...this.categorylist, ...res.data.list];
					}
				}
			})
		},
		methods: {
			jumpPage(e) {
				uni.navigateTo({
				  url: `/pages/index/list?id=${e.id}&type=4`,
				});
			},
		}
	}
</script>
<style>
	page{
	background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	
.BlindBox {
  width: calc(100vw-60rpx);
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 30rpx;
  margin-top: 12rpx;
  box-sizing: border-box;
  box-shadow: 1rpx 4rpx 19rpx 5rpx rgba(207, 207, 207, 0.36);
  .nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .nav_box {
      width: 20%;
      height: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .img {
        width: 100rpx;
        height: 100rpx;
      }
      .text {
        height: 20rpx;
        font-size: 20rpx;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #000000;
        line-height: 22rpx;
        opacity: 0.7;
      }
    }
  }
}

</style>
